<template>
  <view class="main">
    <view class="provinces">
      <view class="flex_between_center top_bar">
        <view class="title">选择办税地点</view>
        <picker @change="provincesChange" :value="provincesIndex" :range="provinces" range-key="unitdz">
          <view class="picker flex_align">
            {{ provinces[provincesIndex].unitdz }}
            <u-icon style="margin-left: 10rpx" name="arrow-right" color="#666666" size="16"></u-icon>
          </view>
        </picker>
      </view>
    </view>
    <view>
      <uni-calendar class="uni-calendar--hook" :selected="selected" :startDate="startDate" :showMonth="false"
        @change="dateChange" @monthSwitch="monthSwitch" />
    </view>
    <view class="tax">
      <view v-for="(item, index) in dataList" :key="index" class="tax-wrap">
        <view class="tax-content">
          <view v-if="changeMonth < endMonth(item.bsjssj) && changeMonth > startMonth(item.bskssj)" class="date">
            {{ firstDay(todayMonth) }}日-{{ lastDay(todayMonth) }}日
          </view>
          <view v-if="changeMonth < endMonth(item.bsjssj) && changeMonth == startMonth(item.bskssj)" class="date">
            {{ startTime(item.bskssj) }}日-{{ lastDay(todayMonth) }}日
          </view>
          <view v-if="changeMonth == endMonth(item.bsjssj) && changeMonth > startMonth(item.bskssj)" class="date">
            01日-{{ endTime(item.bsjssj) }}日
          </view>
          <view v-if="changeMonth == startMonth(item.bskssj) && changeMonth == endMonth(item.bsjssj)" class="date">
            {{ startTime(item.bskssj) }}日-{{ endTime(item.bsjssj) }}日
          </view>
          <view class="content">
            <text style="font-size: 32rpx;">
              {{ item.bssz }}
            </text>
            <text style="color: #999;">
              {{ item.bz }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script type="text/javascript" src="plus-confusion://../tools/bsrl/index"></script>

<style scoped lang="scss">
.main {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  background-color: #fff;
}

.top_bar {
  background-color: #ffffff;
  padding: 2rpx 28rpx;
  min-height: 100rpx;
}

.tax-wrap {
  padding: 20rpx 30rpx;
  min-height: 160rpx;
  width: 750rpx;

  .tax-content {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .content {
      display: flex;
      flex-direction: column;
      width: 80%;
      margin-left: 20rpx;
    }
  }
}
.date{
  width: 150rpx;
  white-space: nowrap;
}
</style>
